<template>
    <div class="today-tasks">
      <router-view v-if="$route.name === 'TaskInfo'"></router-view>
      <div v-else>
        <div class="title">今日任务</div>
        <div class="task-list">
          <div
            v-for="(task, index) in tasks"
            :key="index"
            class="task-item"
            @click="viewTaskDetail(task)"
          >
            <div class="task-info">
              <div class="task-title">{{ task.title }}</div>
              <div class="task-rating">评分: {{ task.rating }}</div>
            </div>
            <div class="task-status">
              <span :class="task.status">{{ task.status }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script>
import { useRouter } from 'vue-router'; // 导入 useRouter

  export default {
    name: "TodayTasks",
    setup() {
    const router = useRouter(); // 在 setup 中获取 router 实例
    return { router }; // 返回 router，以便在 methods 中使用
  },
    data() {
      return {
        tasks: [
          {
            title: "任务1",
            status: "未开始",
            rating: 3,
            details: {
              description: "这是任务1的详细描述",
              startTime: "2023-10-01 09:00",
              endTime: "2023-10-01 18:00",
              comments: "任务1的完成情况描述"
            }
          },
          {
            title: "任务2",
            status: "已完成",
            rating: 5,
            details: {
              description: "这是任务2的详细描述",
              startTime: "2023-10-01 10:00",
              endTime: "2023-10-01 12:00",
              comments: "任务2的完成情况描述"
            }
          },
          {
            title: "任务3",
            status: "已取消",
            rating: 2,
            details: {
              description: "这是任务3的详细描述",
              startTime: "2023-10-01 10:00",
              endTime: "2023-10-01 12:00",
              comments: "任务3的完成情况描述"
            }
          }
        ]
      };
    },
    methods: {
      viewTaskDetail(task) {
        this.router.push({
        name: "TaskInfo",
        params: { task: JSON.stringify(task) }
      });
      }
    }
  };
  </script>
  
  <style scoped>
  .today-tasks {
    padding: 0;
    margin: 0;
  }
  
  .title {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
    color: white;
    background-color: #409EFF;
  }
  
  .task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
  
  .task-item {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .task-item:hover {
    background-color: #f5f5f5;
  }
  
  .task-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .task-title {
    font-weight: bold;
  }
  
  .task-rating {
    font-size: 14px;
    color: #909399;
  }
  
  .task-status {
    font-size: 14px;
  }
  
  .task-status .未开始 {
    color: #909399;
  }
  
  .task-status .已完成 {
    color: #67c23a;
  }
  
  .task-status .已取消 {
    color: #f56c6c;
  }
  </style>